﻿<!DOCTYPE html>
<html>
  <head>
    <title>徽标 Badge</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=1440, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/___badge/styles.css" type="text/css" rel="stylesheet"/>
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" type="text/css" rel="stylesheet"/>
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/prototypePre.js"></script>
    <script src="data/document.js"></script>
    <script src="resources/scripts/prototypePost.js"></script>
    <script src="files/___badge/data.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (元件标题) -->

      <!-- 背景 (Dynamic Panel) -->
      <div id="u3399" class="ax_default" data-label="背景">
        <div id="u3399_state0" class="panel_state" data-label="State1" style="">
          <div id="u3399_state0_content" class="panel_state_content">
          </div>
        </div>
      </div>

      <!-- 线条 (Dynamic Panel) -->
      <div id="u3400" class="ax_default" data-label="线条">
        <div id="u3400_state0" class="panel_state" data-label="State1" style="">
          <div id="u3400_state0_content" class="panel_state_content">
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u3401" class="ax_default _默认样式">
        <div id="u3401_div" class=""></div>
        <div id="u3401_text" class="text ">
          <p><span style="font-family:'FontAwesome Bold', 'FontAwesome Regular', 'FontAwesome';"></span><span style="font-family:'微软雅黑 Bold', '微软雅黑';"> 元件标题</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u3402" class="ax_default _默认样式">
        <div id="u3402_div" class=""></div>
        <div id="u3402_text" class="text ">
          <p><span style="font-family:'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;"> </span><span style="font-family:'FontAwesome';font-weight:400;">作品首页</span></p>
        </div>
      </div>

      <!-- Unnamed (版权信息) -->

      <!-- Unnamed (Rectangle) -->
      <div id="u3404" class="ax_default _默认样式">
        <img id="u3404_img" class="img " src="images/___icons/u605.png"/>
        <div id="u3404_text" class="text ">
          <p><span>Copyright © </span><a id="u3405" class="link"><span>http://t.cn/EPh287q</span></a><span>, All Rights Reserved.</span></p><p><span>打造高保真原型，快人一步</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u3406" class="ax_default" data-left="20" data-top="100" data-width="1100" data-height="90">

        <!-- Unnamed (Rectangle) -->
        <div id="u3407" class="ax_default _默认样式">
          <div id="u3407_div" class=""></div>
          <div id="u3407_text" class="text ">
            <p style="font-size:14px;"><span style="font-family:'微软雅黑 Bold', '微软雅黑';font-weight:700;">使用说明</span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u3408" class="ax_default _默认样式">
          <div id="u3408_div" class=""></div>
          <div id="u3408_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u3409" class="ax_default _默认样式">
        <div id="u3409_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u3410" class="ax_default _默认样式">
        <div id="u3410_div" class=""></div>
        <div id="u3410_text" class="text ">
          <p><span>基础用法 </span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u3411" class="ax_default" data-left="65" data-top="320" data-width="100" data-height="100">

        <!-- Unnamed (Rectangle) -->
        <div id="u3412" class="ax_default _默认样式">
          <div id="u3412_div" class=""></div>
          <div id="u3412_text" class="text ">
            <p><span></span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u3413" class="ax_default _默认样式">
          <div id="u3413_div" class=""></div>
          <div id="u3413_text" class="text ">
            <p><span>5</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u3414" class="ax_default" data-left="175" data-top="320" data-width="100" data-height="100">

        <!-- Unnamed (Rectangle) -->
        <div id="u3415" class="ax_default _默认样式">
          <div id="u3415_div" class=""></div>
          <div id="u3415_text" class="text ">
            <p><span></span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u3416" class="ax_default _默认样式">
          <div id="u3416_div" class=""></div>
          <div id="u3416_text" class="text ">
            <p><span>N</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u3417" class="ax_default _默认样式">
        <div id="u3417_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u3418" class="ax_default _默认样式">
        <div id="u3418_div" class=""></div>
        <div id="u3418_text" class="text ">
          <p><span>多种样式</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u3419" class="ax_default" data-left="285" data-top="320" data-width="100" data-height="100">

        <!-- Unnamed (Rectangle) -->
        <div id="u3420" class="ax_default _默认样式">
          <div id="u3420_div" class=""></div>
          <div id="u3420_text" class="text ">
            <p><span></span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u3421" class="ax_default _默认样式">
          <div id="u3421_div" class=""></div>
          <div id="u3421_text" class="text ">
            <p><span>99+</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u3422" class="ax_default" data-left="395" data-top="320" data-width="110" data-height="100">

        <!-- Unnamed (Rectangle) -->
        <div id="u3423" class="ax_default _默认样式">
          <div id="u3423_div" class=""></div>
          <div id="u3423_text" class="text ">
            <p><span></span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u3424" class="ax_default _默认样式">
          <div id="u3424_div" class=""></div>
          <div id="u3424_text" class="text ">
            <p><span>999+</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u3425" class="ax_default _默认样式">
        <div id="u3425_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u3426" class="ax_default _默认样式">
        <div id="u3426_div" class=""></div>
        <div id="u3426_text" class="text ">
          <p><span>小红点</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u3427" class="ax_default" data-left="143" data-top="666" data-width="50" data-height="53">

        <!-- Unnamed (Rectangle) -->
        <div id="u3428" class="ax_default _默认样式">
          <div id="u3428_div" class=""></div>
          <div id="u3428_text" class="text ">
            <p><span></span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u3429" class="ax_default _默认样式">
          <div id="u3429_div" class=""></div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u3430" class="ax_default" data-left="213" data-top="676" data-width="41" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u3431" class="ax_default _默认样式">
          <div id="u3431_div" class=""></div>
          <div id="u3431_text" class="text ">
            <p><span></span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u3432" class="ax_default _默认样式">
          <div id="u3432_div" class=""></div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u3433" class="ax_default" data-left="264" data-top="676" data-width="40" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u3434" class="ax_default _默认样式">
          <div id="u3434_div" class=""></div>
          <div id="u3434_text" class="text ">
            <p><span></span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u3435" class="ax_default _默认样式">
          <div id="u3435_div" class=""></div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u3436" class="ax_default" data-left="318" data-top="676" data-width="120" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u3437" class="ax_default _默认样式">
          <img id="u3437_img" class="img " src="images/___badge/u3437.png"/>
          <div id="u3437_text" class="text ">
            <p><span>文字链接</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u3438" class="ax_default _默认样式">
          <div id="u3438_div" class=""></div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u3439" class="ax_default _默认样式">
        <div id="u3439_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u3440" class="ax_default _默认样式">
        <div id="u3440_div" class=""></div>
        <div id="u3440_text" class="text ">
          <p><span>表示状态</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u3441" class="ax_default" data-left="802" data-top="640" data-width="80" data-height="30">

        <!-- Unnamed (Rectangle) -->
        <div id="u3442" class="ax_default _默认样式">
          <div id="u3442_div" class=""></div>
          <div id="u3442_text" class="text ">
            <p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;color:#BFBFBF;">●</span><span style="font-family:'Microsoft Tai Le';font-weight:400;font-size:14px;color:rgba(0, 0, 0, 0.427450980392157);"> </span><span style="font-family:'微软雅黑';font-weight:400;color:#999999;">未开始</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u3443" class="ax_default" data-left="802" data-top="670" data-width="80" data-height="30">

        <!-- Unnamed (Rectangle) -->
        <div id="u3444" class="ax_default _默认样式">
          <div id="u3444_div" class=""></div>
          <div id="u3444_text" class="text ">
            <p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;color:#0079FE;">●</span><span style="font-family:'Microsoft Tai Le';font-weight:400;font-size:14px;color:rgba(0, 0, 0, 0.427450980392157);"> </span><span style="font-family:'微软雅黑';font-weight:400;color:#999999;">进行中</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u3445" class="ax_default" data-left="802" data-top="700" data-width="80" data-height="30">

        <!-- Unnamed (Rectangle) -->
        <div id="u3446" class="ax_default _默认样式">
          <div id="u3446_div" class=""></div>
          <div id="u3446_text" class="text ">
            <p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;color:#4BD863;">●</span><span style="font-family:'Microsoft Tai Le';font-weight:400;font-size:14px;color:rgba(0, 0, 0, 0.427450980392157);"> </span><span style="font-family:'微软雅黑';font-weight:400;color:#999999;">成功</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u3447" class="ax_default" data-left="802" data-top="730" data-width="80" data-height="30">

        <!-- Unnamed (Rectangle) -->
        <div id="u3448" class="ax_default _默认样式">
          <div id="u3448_div" class=""></div>
          <div id="u3448_text" class="text ">
            <p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;color:#FF3B31;">●</span><span style="font-family:'Microsoft Tai Le';font-weight:400;font-size:14px;color:rgba(0, 0, 0, 0.427450980392157);"> </span><span style="font-family:'微软雅黑';font-weight:400;color:#999999;">失败</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u3449" class="ax_default" data-left="802" data-top="760" data-width="80" data-height="30">

        <!-- Unnamed (Rectangle) -->
        <div id="u3450" class="ax_default _默认样式">
          <div id="u3450_div" class=""></div>
          <div id="u3450_text" class="text ">
            <p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;color:#FE9400;">●</span><span style="font-family:'Microsoft Tai Le';font-weight:400;font-size:14px;color:rgba(0, 0, 0, 0.427450980392157);"> </span><span style="font-family:'微软雅黑';font-weight:400;color:#999999;">警告</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u3451" class="ax_default" data-left="770" data-top="600" data-width="32" data-height="30">

        <!-- Unnamed (Rectangle) -->
        <div id="u3452" class="ax_default _默认样式">
          <div id="u3452_div" class=""></div>
          <div id="u3452_text" class="text ">
            <p><span style="font-family:'微软雅黑';font-weight:400;color:#BFBFBF;">●</span><span style="font-family:'Microsoft Tai Le';font-weight:400;color:rgba(0, 0, 0, 0.427450980392157);"> </span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u3453" class="ax_default" data-left="802" data-top="600" data-width="32" data-height="30">

        <!-- Unnamed (Rectangle) -->
        <div id="u3454" class="ax_default _默认样式">
          <div id="u3454_div" class=""></div>
          <div id="u3454_text" class="text ">
            <p><span style="font-family:'微软雅黑';font-weight:400;color:#0079FE;">●</span><span style="font-family:'Microsoft Tai Le';font-weight:400;color:rgba(0, 0, 0, 0.427450980392157);"> </span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u3455" class="ax_default" data-left="834" data-top="600" data-width="32" data-height="30">

        <!-- Unnamed (Rectangle) -->
        <div id="u3456" class="ax_default _默认样式">
          <div id="u3456_div" class=""></div>
          <div id="u3456_text" class="text ">
            <p><span style="font-family:'微软雅黑';font-weight:400;color:#4BD863;">●</span><span style="font-family:'Microsoft Tai Le';font-weight:400;color:rgba(0, 0, 0, 0.427450980392157);"> </span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u3457" class="ax_default" data-left="866" data-top="600" data-width="32" data-height="30">

        <!-- Unnamed (Rectangle) -->
        <div id="u3458" class="ax_default _默认样式">
          <div id="u3458_div" class=""></div>
          <div id="u3458_text" class="text ">
            <p><span style="font-family:'微软雅黑';font-weight:400;color:#FF3B31;">●</span><span style="font-family:'Microsoft Tai Le';font-weight:400;color:rgba(0, 0, 0, 0.427450980392157);"> </span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u3459" class="ax_default" data-left="898" data-top="600" data-width="32" data-height="30">

        <!-- Unnamed (Rectangle) -->
        <div id="u3460" class="ax_default _默认样式">
          <div id="u3460_div" class=""></div>
          <div id="u3460_text" class="text ">
            <p><span style="font-family:'微软雅黑';font-weight:400;color:#FE9400;">●</span><span style="font-family:'Microsoft Tai Le';font-weight:400;color:rgba(0, 0, 0, 0.427450980392157);"> </span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u3461" class="ax_default _默认样式">
        <div id="u3461_div" class=""></div>
        <div id="u3461_text" class="text ">
          <p><span>5</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u3462" class="ax_default _默认样式">
        <div id="u3462_div" class=""></div>
        <div id="u3462_text" class="text ">
          <p><span>99</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u3463" class="ax_default _默认样式">
        <div id="u3463_div" class=""></div>
        <div id="u3463_text" class="text ">
          <p><span>99+</span></p>
        </div>
      </div>

      <!-- Unnamed (Speech Bubble) -->
      <div id="u3464" class="ax_default _默认样式">
        <img id="u3464_img" class="img " src="images/___badge/u3464.png"/>
        <div id="u3464_text" class="text ">
          <p><span>new</span></p>
        </div>
      </div>

      <!-- Unnamed (Speech Bubble) -->
      <div id="u3465" class="ax_default _默认样式">
        <img id="u3465_img" class="img " src="images/___badge/u3465.png"/>
        <div id="u3465_text" class="text ">
          <p><span>new</span></p>
        </div>
      </div>

      <!-- Unnamed (Speech Bubble) -->
      <div id="u3466" class="ax_default _默认样式">
        <img id="u3466_img" class="img " src="images/___badge/u3466.png"/>
        <div id="u3466_text" class="text ">
          <p><span>new</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u3467" class="ax_default _默认样式">
        <div id="u3467_div" class=""></div>
        <div id="u3467_text" class="text ">
          <p><span>new</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u3468" class="ax_default _默认样式">
        <div id="u3468_div" class=""></div>
        <div id="u3468_text" class="text ">
          <p><span>new</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u3469" class="ax_default _默认样式">
        <div id="u3469_div" class=""></div>
        <div id="u3469_text" class="text ">
          <p><span>new</span></p>
        </div>
      </div>

      <!-- Unnamed (Left Arrow Button) -->
      <div id="u3470" class="ax_default _默认样式">
        <img id="u3470_img" class="img " src="images/___badge/u3470.png"/>
        <div id="u3470_text" class="text ">
          <p><span>new</span></p>
        </div>
      </div>

      <!-- Unnamed (Left Arrow Button) -->
      <div id="u3471" class="ax_default _默认样式">
        <img id="u3471_img" class="img " src="images/___badge/u3471.png"/>
        <div id="u3471_text" class="text ">
          <p><span>new</span></p>
        </div>
      </div>

      <!-- Unnamed (Left Arrow Button) -->
      <div id="u3472" class="ax_default _默认样式">
        <img id="u3472_img" class="img " src="images/___badge/u3472.png"/>
        <div id="u3472_text" class="text ">
          <p><span>new</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u3473" class="ax_default _默认样式">
        <div id="u3473_div" class=""></div>
        <div id="u3473_text" class="text ">
          <p><span>hot</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u3474" class="ax_default _默认样式">
        <div id="u3474_div" class=""></div>
        <div id="u3474_text" class="text ">
          <p><span>hot</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u3475" class="ax_default _默认样式">
        <div id="u3475_div" class=""></div>
        <div id="u3475_text" class="text ">
          <p><span>hot</span></p>
        </div>
      </div>
    </div>
  </body>
</html>
